<template>
  <div class="p-2">
    <a-row>
      <a-col :span="6">
        <a-card :bordered="true" title="Basic 基础组件">
          <div class="infoArea">
            <h3>BasicTitle:用于显示标题，可以显示帮助按钮及文本</h3>
            <BasicTitle :helpMessage="helpMessage" normal>BasicTitle组件...</BasicTitle>

            <h3>BasicArrow:带动画的箭头组件</h3>
            <BasicArrow :expand="arrowStatus" @click="arrowStatus = !arrowStatus" />
            <BasicArrow :expand="false" />

            <h3>BasicHelp:帮助按钮组件</h3>
            <BasicHelp class="ml-2" text="BasicHelp组件..." />
            <BasicHelp :text="['提示1', '提示2']" color="orange" showIndex />
            <CountdownInput :count="countNum" />
            <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="200000" :duration="8000" />
            <PopConfirmButton title="确定放弃编辑？" @confirm="" okText="确定" cancelText="取消">删除</PopConfirmButton>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="true" title="测试">
          <div class="infoArea">
            <CollapseContainer title="可折叠面板">
              <a-button v-for="index in 6" :key="index" class="mr-2" @click=""> 打开{{ index }}详情页 </a-button>
            </CollapseContainer>
            <PageWrapper>
              <template #left>left</template>
              <template #right>right</template>
            </PageWrapper>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="true" title="按钮">
          <div class="infoArea">
            <a-space direction="vertical">
              <a-space :size="2" warp>
                <a-button preIcon="ant-design:filter" type="primary" @click="">高级查询</a-button>
                <a-button type="primary" @click="">高级查询</a-button>
                <a-button type="primary" @click="">高级查询</a-button>
                <a-button type="primary" @click="">高级查询</a-button>
              </a-space>
            </a-space>
            <a-space direction="vertical">
              <a-space warp>
                <a-tooltip title="search">
                  <a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
                </a-tooltip>
                <a-button type="primary" shape="circle">A</a-button>
              </a-space>
            </a-space>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="true" title="分割线">
          <div class="infoArea">
            <a-divider>Text</a-divider>
            <a-divider orientation="left">Left Text</a-divider>
            <a-divider orientation="right">Right Text</a-divider>
            <a-divider orientation="left" orientation-margin="50px">
              自定义左侧px
            </a-divider>
            <a-divider style="height: 2px; background-color: #7cb305" />
            <a-divider style="border-color: #7cb305" dashed />
            <a-divider type="vertical" style="height: 60px; background-color: #7cb305" />
            <a-divider type="vertical" style="height: 60px; border-color: #7cb305" dashed />
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <a-card :bordered="true" title="排版">
          <div class="infoArea">
            <TypographyTitle :content=item.title :level=4 />
            <Divider orientation="left">文本text</Divider>
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" disabled />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" mark />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" v-show="false" code />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" v-show="false" keyboard />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" underline />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" delete />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" type="secondary" />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" type="success" />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" type="warning" />
            <TypographyText :content=item.content :ellipsis="{ tooltip: item.content }" type="danger" />
            <TypographyText content="复制内容" copyable />
            <TypographyText content="复制指定内容" :copyable="{ text: '复制指定内容成功!' }" />
            <Divider orientation="left">段落Paragraph</Divider>
            <TypographyParagraph v-model:content=item.editableStr editable />
            <TypographyParagraph>
              按
              <TypographyText content="Esc" keyboard mark strong />
              <TypographyText content="退出" strong />...
            </TypographyParagraph>
            <TypographyParagraph>
              <blockquote>{{ item.content }}</blockquote>
              <pre>{{ item.content }}</pre>
            </TypographyParagraph>

          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="true" title="提示组件">
          <div class="infoArea">
            <Alert class="mt-4" type="info" message="点击后请查看按钮变化" show-icon />
          </div>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, unref, h } from 'vue';
import { List, Card, Image, Typography, Tooltip, Slider, Alert, Avatar, Divider } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { BasicArrow, BasicTitle, BasicHelp } from '/@/components/Basic';
import { CollapseContainer } from '/@/components/Container/index';
import { PageWrapper, PageFooter } from '/@/components/Page';
import { CountdownInput } from '/@/components/CountDown';
import { CountTo } from '/@/components/CountTo/index';
import { PopConfirmButton } from '/@/components/Button';


import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构

const countNum = ref(120);
const loading = ref(true);
const arrowStatus = ref(true);
const helpMessage = ref('这是提示信息');

const TypographyTitle = Typography.Title;
const TypographyText = Typography.Text;
const TypographyParagraph = Typography.Paragraph;
const item = ref({

  title: "这是标题",
  level: 3,
  content: "我们提供完善的设计原则、最佳实践和设计资源文件。",
  editableStr: '可编辑内容1111',
});

// 默认执行一次
onMounted(async () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
});

// Emits声明
const emit = defineEmits(['register', 'success']);

/**
 * 实体类点击事件
 */
function handleEntityClick(item) {
  $message.info('实体类跳转中....' + item);
}

</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}

.infoArea {
  // display: flex;
  // justify-content: space-between;
  // padding: 0 10%;
  width: 100%;
  // height: 100%;
  height: 480px;
}
</style>